<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		
		<style>
		body {
			overflow	: hidden;
			padding		: 0;
			margin		: 0;
			background-color: #BBB;
		}
		#info {
			position	: absolute;
			top		: 0px;
			width		: 100%;
			padding		: 5px;
			text-align	: center;
		}
		#info a {
			color		: #66F;
			text-decoration	: none;
		}
		#info a:hover {
			text-decoration	: underline;
		}
		#bottom_left {
			position	: absolute;
			bottom		: 2px;
			width		: 50%;
			left		: 2px;
			text-align	: left;
		}		
		#bottom_right {
			position	: absolute;
			bottom		: 2px;
			width		: 50%;
			right		: 2px;
			text-align	: right;
		}
		#container {
			width		: 100%;
			height		: 100%;
			overflow	: hidden;
			padding		: 0;
			margin		: 0;
			-webkit-user-select	: none;
			-moz-user-select	: none;
		}
		</style>

	</head>
	<body>
		<div id="container"></div>
		<div id="info">
			点击屏幕 滑动手指
			<br/>
			<span id="result"></span>
		</div> 
		<div id ="bottom_left">
            <input type="checkbox" id="xReverse" >
                <label for="xReverse">左右逆向</label>
        </div>
		<div id ="bottom_right">
            <input type="checkbox" id="yAction" >
                <label for="yAction">控制后轮（y>=90）</label>
        </div>

		<script src="./virtualjoystick.js"></script>
		<script src="./jquery.min.js"></script>
		<script>
			console.log("touchscreen is", VirtualJoystick.touchScreenAvailable() ? "available" : "not available");
	
			var joystick	= new VirtualJoystick({
				container	: document.getElementById('container'),
				mouseSupport	: true,
				limitStickTravel	: true,
			});
			joystick.addEventListener('touchStart', function(){
				console.log('down')
			})
			joystick.addEventListener('touchEnd', function(){
				console.log('up')
			})
			var prevX = 0;
			var prevY = 0;
			var newX = 0;
			var newY = 0;
			setInterval(function(){
				var outputEl	= document.getElementById('result');
				newX = Math.round(joystick.deltaX());
				newY = Math.round(joystick.deltaY()) * -1;
				outputEl.innerHTML	= '<b>遥感位置:</b> '
					+ ' X:'+newX
					+ ' Y:'+newY;
				if ( newX != prevX || newY != prevY ){
					var xhr = new XMLHttpRequest();
					var yAction	= (document.getElementById('yAction').checked) ? 1 : 0
					var xReverse = (document.getElementById('xReverse').checked) ? 1 : 0
					xhr.open('PUT', "./joystick?x="+newX+"&y="+newY+"&yAction="+yAction+"&xReverse="+xReverse);
					xhr.send();
				}
				prevX = newX;
				prevY = newY;
			}, 1/30 * 1000);
		</script>
	</body>
</html>